<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'

require('./spider') // echarts theme
import {debounce} from '@/utils'
import {
  comprehensiveStatisticsThisYear
} from "@/api/system/opinion";

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      chart: null,
      mediaTypes: [],
      months: [],
      datasPositive: {},
      datasNeutral: {},
      datasNegative: {},
      options:[]
    }
  },
  mounted() {
    this.comprehensiveStatisticsThisYear();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    comprehensiveStatisticsThisYear() {
      comprehensiveStatisticsThisYear().then(response => {
        this.months = response.data.months
        this.mediaTypes = response.data.mediaTypes
        this.datasPositive = response.data.datasPositive
        this.datasNeutral = response.data.datasNeutral
        this.datasNegative = response.data.datasNegative
        this.datasRed = response.data.datasRed
        this.datasOrange = response.data.datasOrange
        this.datasYellow = response.data.datasYellow

        this.initChart()
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)


      })

    },
    dataFormatter(obj) {
      const pList = this.mediaTypes
      let temp

      for (let i = 0; i < this.months.length; i++) {
        let year = this.months[i];
        let max = 0
        let sum = 0
        temp = obj[year]
        for (let i = 0, l = temp.length; i < l; i++) {
          max = Math.max(max, temp[i])
          sum += temp[i]
          obj[year][i] = {
            name: pList[i],
            value: temp[i]
          }
        }
        obj[year + 'max'] = Math.floor(max / 100) * 100
        obj[year + 'sum'] = sum

      }
      return obj
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'spider')
      const dataMap = {}

      dataMap.datasPositive = this.dataFormatter(this.datasPositive)
      dataMap.datasNeutral = this.dataFormatter(this.datasNeutral)
      dataMap.datasNegative = this.dataFormatter(this.datasNegative)

      dataMap.datasRed = this.dataFormatter(this.datasRed)
      dataMap.datasOrange = this.dataFormatter(this.datasOrange)
      dataMap.datasYellow = this.dataFormatter(this.datasYellow)

      this.months.forEach(month=>{
        let option={
          title: {text: month+'舆情统计',
            padding: 10,
          },
          grid: {
            left: 25,
            right: 25,
            bottom: 20,
            top: 90,
            containLabel: true
          },
          series: [
            {data: dataMap.datasPositive[month+'']},
            {data: dataMap.datasNeutral[month+'']},
            {data: dataMap.datasNegative[month+'']},
            {data: dataMap.datasRed[month+'']},
            {data: dataMap.datasOrange[month+'']},
            {data: dataMap.datasYellow[month+'']},
            {
              data: [
                {name: '正面', value: dataMap.datasPositive[month+'sum']},
                {name: '中性', value: dataMap.datasNeutral[month+'sum']},
                {name: '负面', value: dataMap.datasNegative[month+'sum']}
              ]
            }
          ]
        }

        this.options.push(option)
      })


      this.chart.setOption({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 2000,
            data: this.months,
          },
          backgroundColor: '#fff',
          title: {
            subtext: '数据来自军情/舆情系统'
          },
          tooltip: {},
          legend: {
            x: 'right',
            data: ['正面', '中性', '负面','红色预警','橙色预警','黄色预警'],
            selected: {
              '红色预警': false, '橙色预警': false, '黄色预警': false
            }
          },
          calculable: true,
          grid: {
            top: 80,
            bottom: 100,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '')
                  }
                }
              }
            }
          },
          xAxis: [
            {
              'type': 'category',
              'axisLabel': {
                'interval': 0,
                rotate: 45
              },
              'data': this.mediaTypes,
              splitLine: {show: false}
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '舆情数量（条）'
            }
          ],
          series: [
            {name: '正面', type: 'bar',barMaxWidth:50,},
            {name: '中性', type: 'bar',barMaxWidth:50,},
            {name: '负面', type: 'bar',barMaxWidth:50,},
            {name: '红色预警', type: 'bar',barMaxWidth:50,},
            {name: '橙色预警', type: 'bar',barMaxWidth:50,},
            {name: '黄色预警', type: 'bar',barMaxWidth:50,},
            {
              name: '舆情占比',
              type: 'pie',
              center: ['75%', '35%'],
              radius: '28%',
              z: 100
            }
          ]
        },
        options: this.options
      })
    }
  }
}
</script>
